import ContentWrapper from '../../../components/ContentWrapper';
import './index.scss';
import SwitchTabs from '../../../components/SwitchTabs';
import { useState } from 'react';
import useFetch from '../../../hooks/useFetch';
import Carousel from '../../../components/Carousel';

const Trending: React.FC = () => {
  const [endpoint, setEndpoint] = useState('day');

  const { data, loading } = useFetch(`/trending/all/${endpoint}`);

  const onTabChange = (tab: string) => {
    setEndpoint(tab === '日' ? 'day' : 'week');
  };

  return (
    <div className="carousel-section">
      <ContentWrapper>
        <span className="carousel-title">趋势</span>
        <SwitchTabs data={['日', '周']} onTabChange={onTabChange} />
      </ContentWrapper>
      <Carousel data={data?.results} loading={loading}></Carousel>
    </div>
  );
};

export default Trending;
